import { Module } from 'vuex'
import { v4 as uuidv4 } from 'uuid'
import { GlobalDataProps } from "./index";
import { TextComponentProps, textDefaultProps } from "../../src/defaultProps";
export interface EditorProps {
  components: ComponentData[]; // 供中间编辑器渲染的数据
  currentElement: string;  // 当前编辑的是哪个元素，uuid
  page: PageData;// 当然最后保存的时候还有有一些项目信息，这里并没有写出，等做到的时候再补充
  // copiedComponent?: ComponentData;

}

export  interface ComponentData {
  props: {
    [key: string]: any;
  };
  id: string;
  name: string; // 业务组件名称，
}
export interface PageProps {
  backgroundColor: string;
  backgroundImage: string;
  backgroundRepeat: string;
  backgroundSize: string;
  height: string;
}
export interface PageData {
  id?: number;
  props?: PageProps;
  title?: string;
  desc?: string;
  coverImg?: string;
  uuid?: string;
  setting?: { [key: string]: any };
  isTemplate?: boolean;
  isHot?: boolean;
  isNew?: boolean;
  author?: string;
  copiedCount?: number;
  status?: number;
  user? : {
    gender: string;
    nickName: string;
    picture: string;
    userName: string;
  };
}

export const testComponents: ComponentData[] = [
  { id: uuidv4(), name: 'l-text', props: { ...textDefaultProps, text: 'hello', fontSize: '20px', color: '#000000', 'lineHeight': '1', textAlign: 'left', fontFamily: '', width: '100px', height: '100px', backgroundColor: '#efefef', left: '100px', top: '150px' }},
  { id: uuidv4(), name: 'l-text', props: { text: 'hello2', fontSize: '10px', fontWeight: 'bold', 'lineHeight': '2', textAlign: 'left', fontFamily: '' }},
  { id: uuidv4(), name: 'l-text',   props: { text: 'hello3', fontSize: '15px', actionType: 'url', url: 'https://www.baidu.com', 'lineHeight': '3', textAlign: 'left', fontFamily: '' }},
  // { id: uuidv4(), name: 'l-image',  props: { ...imageDefaultProps, src: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f3e3a17c305b1070f455202.jpg', width: '100px' }},
]
const pageDefaultProps = { backgroundColor: '#ffffff', backgroundImage: '', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', height: '560px' }
const editor: Module<EditorProps,GlobalDataProps> = {
  state:{
    components: testComponents,
    currentElement:'',
    page: {
      props: pageDefaultProps,
      title: 'test title'
    },

  },
  mutations:{
    addComponent(state, props: Partial<TextComponentProps>){
      const newComponent: ComponentData = {
        id: uuidv4(),
        name:'l-text',
        props
      }
      state.components.push(newComponent)
    },

    setActive(state, currentId: string) {
      state.currentElement = currentId
    },
    updateComponent(state, {key, value}){
      const updatedComponent = state.components.find((component) => component.id === state.currentElement)
      if(updatedComponent){
        updatedComponent.props[key] = value
      }
    },
  },
  getters: {
    getCurrentElement: (state) => {
      return state.components.find(component => component.id === state.currentElement)
    }
  }


}

export default editor